<template>  
  <view class="container">  
    <view class="header">  
      <text class="header-title">药店药品比价</text>  
    </view>
	<view class="search-bar">  
		<input class="search-input" type="text" placeholder="请输入药品名称" v-model="searchQuery" />  
		<button class="search-button" @click="search">搜索</button>  
    </view> 
    <view class="card-list">  
      <view v-for="(item, index) in listData" :key="index" class="card-item">  
        <view class="card-content">  
          <text class="card-title">{{ item.title }}</text>  
          <text class="card-description">{{ item.description }}</text>  
        </view>  
      </view>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
	  searchQuery: {
		  name:'阿莫西林',
		  sort:'默认排序',
		  area:"全市",
		  currentPage:1,
		  pageSize:10
	  }, // 用来保存搜索查询的变量  	
      listData: [  
        { title: '卡片 1', description: '这是卡片 1 的描述' },  
        { title: '卡片 2', description: '这是卡片 2 的描述' },  
        { title: '卡片 3', description: '这是卡片 3 的描述' },  
        // ...更多卡片数据  
      ]  
    }  
  },
	methods: {
		search() {  
			// 在这里处理搜索逻辑，比如发送请求到后端获取数据  
		    let url = '/ypbj/ybjGetStockWarnAllList';
		    this.$http.get(url).then(res=>{
		    	console.log("res::",res)
		      if(res.data.success){
		    	
		      }
		    })  
		},  
	},
}  
</script>  
  
<style>  
.container {  
  display: flex;  
  flex-direction: column; /* 垂直布局 */  
  padding: 20rpx;  
}  
  
.header {  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中（如果header高度固定）*/  
  height: 60rpx; /* 设置header的高度 */  
  padding: 10rpx;  
  background-color: #f5f5f5; /* 背景色 */  
  border-bottom: 1rpx solid #ccc; /* 下边框 */  
}  
  
.header-title {  
  font-size: 20rpx;  
  font-weight: bold;  
}  
  
.card-list {  
  /* 默认就是块级元素，垂直堆叠 */  
}  
  
.card-item {  
  margin-bottom: 20rpx; /* 卡片之间的垂直间距 */  
  background-color: #fff;  
  border-radius: 10rpx;  
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);  
  overflow: hidden; /* 隐藏溢出内容 */  
}  
  
.card-content {  
  padding: 15rpx;  
}  
  
.card-title {  
  font-size: 18rpx;  
  font-weight: bold;  
  margin-bottom: 10rpx;  
}  
  
.card-description {  
  font-size: 14rpx;  
  color: #888;  
}
/* 保留之前的样式，并添加新的样式 */  
.container {  
  display: flex;  
  flex-direction: column;  
  padding: 20rpx;  
}  
  
.header {  
  /* ...你的header样式 */  
}  
  
.search-bar {  
  display: flex;  
  align-items: center; /* 垂直居中 */  
  margin-top: 10rpx; /* 与header之间的间距 */  
  margin-bottom: 10rpx;
}  
  
.search-input {  
  flex: 1; /* 占据剩余空间 */  
  height: 40rpx; /* 输入框高度 */  
  padding: 0 10rpx; /* 内边距 */  
  border-radius: 5rpx; /* 边框圆角 */  
  border: 1rpx solid #ccc; /* 边框 */  
}  
  
.search-button {  
  height: 40rpx; /* 按钮高度，与输入框保持一致 */  
  line-height: 30rpx; /* 垂直居中按钮文本 */  
  padding: 0 10rpx; /* 内边距 */  
  border-radius: 5rpx; /* 边框圆角 */  
  background-color: #009688; /* 背景色 */  
  color: #fff; /* 文本颜色 */  
  border: none; /* 无边框 */  
  margin-left: 10rpx; /* 与输入框之间的间距 */  
  font-size: 32rpx;
}  
</style>